<template>
  <Modal
    :mask-closable="false"
    v-model="deviceVisible"
    width="800"
    title="件码详情"
    class="modal-content-layout other"
  >
    <div class="tableContent">
      <Table
        class="resizable-table"
        border
        :columns="columns"
        ellipsis
        stripe
        height="250"
        :data="dataArr"
      >
        <template slot-scope="{ row }" slot="pieceCode">
          <span style="cursor: pointer;color: aqua;" @click="getDetail(row)">
          {{ row.pieceCode }}
          </span>
        </template>
      </Table>
      <!-- <div class="pageWrap mt16">
        <pageLeftTitle :total="total"  />
        <Page
          :total="total"
          :page-size="pageSize"
          :page-size-opts="pageSizeOption"
          :current="pageNum"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          show-sizer
          show-total
        />
      </div> -->
    </div>
    <div slot="footer">
      <Button type="default" @click="deviceVisible = false">{{
        $t("common.Cancle")
      }}</Button>
    </div>
    <Modal
    v-model="create"
    width="400"
    title="件码数量详情"
    class="modal-content-layout other"
  >
    <div class="tableContent">
      <Table
        class="resizable-table"
        border
        :columns="columns1"
        ellipsis
        stripe
        height="230"
        :data="dataArr1"
      >
      </Table>
    </div>
    <div slot="footer">
      <Button type="default" @click="create = false">{{
        $t("common.Cancle")
      }}</Button>
    </div>
  </Modal>
  </Modal>
</template>

<script>
export default {
  name: "boxCodeDetail",
  data() {
    return {
      dataArr: [],
      dataArr1: [],
      create:false,
      deviceVisible:false,
      pageNum: 1,
      pageSize: 10,
      pageSizeOption: [10, 20, 30, 40],
      total: 0,
      columns: [
        {
          title: "序号",
          key: "index",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "件码",
          key: "pieceCode",
          minWidth: 200,
          slot:'pieceCode',
          align: "center",
          resizable: true,
          tooltip: true,
        },
      ],
      columns1: [
        {
          title: "件码",
          key: "itemCode",
          minWidth: 200,
          align: "center",
          resizable: true,
          tooltip: true,
        },
      ],
    };
  },
  methods: {
    getDetail(row){
      this.axios({
        url:'/dms/bxCode/showItemCodeby',
        method:'get',
        params:{
          historicalQuantity:row.historicalQuantity
        }
      }).then(res=>{
        this.dataArr1=res.data;
        this.create=true;

      })
    },
    show(id) {
      this.deviceVisible = true;
      this.axios({
        method: "get",
        url: "/dms/bxCode/reportingSumTotal",
        params: {
          // pageNum:this.pageNum,
          // pageSize:this.pageSize,
          reportingId:id,
        },
      }).then(res=>{
        this.dataArr=res.data || [];
      })
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
